<template>
	<view class="lifestyleProducts">
		<view class="top">
			<view></view>
			<view class="">
				<view @tap="back">
					<image src="/static/img/index/93.png" mode="widthFix"></image>
				</view>
				<view @tap="handeShare">
					<image src="/static/img/index/188.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true">
			<view class="banner">
				<swiper class="swiper" circular>
					<swiper-item v-for="(item,index) in data.info.images" @click="handePreview(index)" :key="index">
						<view class="swiper-item">
							<image :src="data.httpUrl+'/app/file/viewFile?fileId='+item" mode="aspectFill">
							</image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="price">
				<view class="price_1">
					<view class="left" v-if="data.info.hasPreferential.value == 'Y'">
						<text>{{data.info.preferentialPrice.split('.')[0]}}</text>
						<text
							v-show="data.info.preferentialPrice.split('.').length == 2">.{{data.info.preferentialPrice.split('.')[1]}}</text>
						<text style="text-decoration:line-through;">¥{{data.info.price}}</text>
					</view>
					<view class="left" v-else>
						<text>{{data.info.price.split('.')[0]}}</text>
						<text v-show="data.info.price.split('.').length == 2">.{{data.info.price.split('.')[1]}}</text>
					</view>
					<text>已售: {{data.info.sellCount}}</text>
				</view>
				<view class="price_2">
					<view class="left">
						<view class="sellType">{{data.info.sellType?.name}}</view>
						<view class="productType">{{data.info.productType.name}}</view>
						<!-- <view class="mdg">免单购</view> -->
						<text>{{data.info.productName}}</text>
					</view>
					<image src="/static/img/index/94.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="evaluate">
				<view class="top" @tap="handeClick1">
					评价（{{data.info.commentsCount}}）
					<image src="/static/img/index/96.png" mode="widthFix"></image>
				</view>
				<view class="listItem" v-for="(item,index) in data.info.commentsDTOS" :key="index">
					<view class="left">
						<image v-if="item.avatarId" :src="data.httpUrl+'/app/file/viewFile?fileId='+item.avatarId"
							mode="aspectFill">
						</image>
					</view>
					<view class="right">
						{{item.userName}}
						<text>{{item.content}}</text>
					</view>
				</view>
			</view>

			<view class="shop">
				<view class="top">
					<view class="left">
						<image v-if="data.info.storeInfo.storeLogo"
							:src="data.httpUrl+'/app/file/viewFile?fileId='+data.info.storeInfo.storeLogo"
							mode="aspectFill">
						</image>
					</view>
					<view class="center">
						{{data.info.storeInfo.storeName}}
						<view class="">
							<view class="">
								<image src="/static/img/index/164.png" mode="widthFix"></image>
								{{data.info.storeInfo.credit}}
							</view>
							<view class="">
								<image src="/static/img/index/165.png" mode="widthFix"></image>
								{{data.info.storeInfo.bondAmount>=10000?Math.floor(data.info.storeInfo.bondAmount/10000)+'万+':data.info.storeInfo.bondAmount}}
							</view>
						</view>
					</view>
					<view v-if="data.info.storeInfo.userType == 2" class="right"
						@tap="navTo('/pages/shop/index?id='+data.info.storeInfo.storeId)">
						进店逛逛
						<!-- <image src="/static/img/index/96.png" mode="widthFix"></image> -->
					</view>
				</view>
				<view class="bot">
					<view class="" @tap="handeClick2(item)"
						v-for="(item,index) in data.info.storeInfo.storeTopProducts && data.info.storeInfo.storeTopProducts.length>3?data.info.storeInfo.storeTopProducts.slice(0,3):data.info.storeInfo.storeTopProducts"
						:key="index">
						<view class="img">
							<image v-if="item.fileId" :src="data.httpUrl+'/app/file/viewFile?fileId='+item.fileId"
								mode="aspectFill">
							</image>
						</view>
						<view class="text">
							<text>{{item.productName}}</text>
							¥{{item.hasPreferential.value == 'Y'?item.preferentialPrice:item.price}}
						</view>

					</view>
				</view>
			</view>

			<view class="goodsDetails">
				<view class="goodsDetailsTop">
					详情
					<!-- <view class="right">
						收起
						<image src="/static/img/index/94.png" mode="widthFix"></image>
					</view> -->
				</view>
				<view class="goodsDetailsItem">
					{{data.info.productDesc}}
					<!-- 	<view class="img">

					</view> -->
				</view>
			</view>
		</scroll-view>
		<view class="bottom" v-if="data.info.productType.value == 'PRODUCT'||data.info.productType.value == 'SERVICE'">
			<view class="left">
				<view @tap="navTo('/pages/shop/index?id='+data.info.storeInfo.storeId)">
					<uni-icons type="shop" size="24"></uni-icons>
					店铺
				</view>
				<view @tap="customerService">
					<uni-icons type="contact" size="24"></uni-icons>
					客服
				</view>
				<view @tap="navTo('/pages/shoppingCart/index')">
					<uni-icons type="cart" size="24"></uni-icons>
					购物车
				</view>
			</view>
			<view class="right">
				<text @tap="addCar(0)">加入购物车</text>
				<text @tap="addCar(1)">立即购买</text>
			</view>
		</view>
		<view class="bottom1" v-else>
			<text @tap="customerService">在线洽谈</text>
		</view>
		<u-popup round="20" mode="bottom" :show="data.show" @close="()=>{data.show = false}">
			<view class="popupEvaluate">
				<view class="evaluateTop">
					<view class="left">

					</view>
					共{{data.commentTotal}}条评论
					<image src="/static/img/index/101.png" mode="widthFix"></image>
				</view>
				<scroll-view @scrolltolower="scrolltolower" scroll-y="true">
					<view class="evaluateItem" v-for="(item,index) in data.commentList" :key="index">
						<view class="evaluateItemTop">
							<view class="left">
								<view class="img">
									<image :src="data.httpUrl+'/app/file/viewFile?fileId='+item.avatarId"
										mode="aspectFill">
									</image>
								</view>
								<view class="text">
									{{item.userName}}
									<text>{{item.productDTO.specName}}，{{item.productDTO.specValue}}</text>
								</view>
							</view>
							{{item.createTime}}
						</view>
						<text>{{item.content}}</text>
						<view class="imgs">
							<view class="" v-for="(item1,index1) in item.attachmentIdList" :key="index1">
								<image @tap="previewImage(item1)" v-if="item1.fileType != '.mp4'"
									:src="data.httpUrl+'/app/file/viewFile?fileId='+item1.id" mode="aspectFill"></image>
								<image v-else
									:src="data.httpUrl+'/app/file/viewFile?fileId='+item1.id+'&process=video/snapshot,t_1000,f_jpg,w_800,h_600,m_fast'"
									mode="aspectFill"></image>
								<view @tap="previewVideo(item1)" v-if="item1.fileType == '.mp4'">
									<image src="/static/img/index/131.png" mode="widthFix"></image>
								</view>
							</view>
						</view>
						<!-- <view class="bot">
							<view class="left">
								<image src="/static/img/index/104.png" mode="widthFix"></image>
								分享
							</view>
							<view class="right">
								<view class="">
									<image src="/static/img/index/102.png" mode="widthFix"></image>
									379
								</view>
								<view class="">
									<image src="/static/img/index/103.png" mode="widthFix"></image>
									379
								</view>
							</view>
						</view> -->
					</view>
					<PreviewVideo ref="previewVideoc" />
				</scroll-view>

			</view>

		</u-popup>
		<uni-popup ref="popup" type="center">
			<ShareGoods :src="data.info.images[0]" :id="data.info.id" :tit="data.info.productName"
				:price="data.info.hasPreferential.value == 'Y'?data.info.preferentialPrice:data.info.price" />
		</uni-popup>
		<u-popup round="20" mode="bottom" :show="data.show1" @close="()=>{data.show1 = false}">
			<view class="specificationsPopup">
				<view class="specificationsPopupTop">
					<view class="left">
						<view class="img">
							<image :src="data.httpUrl+'/app/file/viewFile?fileId='+data.info.images[0]"
								mode="aspectFill">
							</image>
						</view>
						<view v-if="data.sku.preferentialPrice">
							<text>{{data.sku.preferentialPrice}}</text>
							<text
								style="text-decoration:line-through;margin-left: 10rpx;color: #BFBFBF;font-size: 28rpx;">{{data.sku.price}}</text>
						</view>
						<text v-else>{{data.sku.price}}</text>
					</view>
					<image @tap="data.show1 = false" src="/static/img/index/101.png" mode="widthFix"></image>
				</view>
				<view class="specificationsPopupMain" v-for="(item,index) in data.info.skus" :key="index">
					{{item.specName}}
					<view class="listItem">
						<text @click="data.sku.id = item1.id,
							data.sku.preferentialPrice = item1.preferentialPrice,
							data.sku.price = item1.price,
							data.sku.hasPreferential = item1.hasPreferential" :class="item1.id == data.sku.id?'active':''"
							v-for="(item1,index1) in item.list" :key="index1">{{item1.specValue}}</text>
					</view>
				</view>
				<view class="specificationsPopupMain" v-for="(item,index) in data.info.attrs" :key="index">
					{{item.name}}
					<view class="listItem">
						<text @click="item.id == item1.id?item.id = '':item.id = item1.id "
							:class="item.id == item1.id?'active':''" v-for="(item1,index1) in item.list"
							:key="index1">{{item1.propertyValue}}</text>
					</view>
				</view>
				<view class="specificationsPopupBot">
					<view class="left">
						数量
						<text>(库存: 有货)</text>
					</view>
					<view class="right">
						<image @tap="handeClick(0)"
							:src="data.sku.num == 1?'/static/img/index/jian1.png':'/static/img/index/jian.png'"
							mode="widthFix"></image>
						<input :maxlength="data.sku.stockBalance" v-model="data.sku.num" type="number" />
						<image @tap="handeClick(1)"
							:src="data.sku.num >=  data.sku.stockBalance ?'/static/img/index/jia1.png':'/static/img/index/jia.png'"
							mode="widthFix"></image>
					</view>
				</view>
				<view @tap="purchase" class="specificationsPopupBot1">
					确认
				</view>
			</view>

		</u-popup>
		<FreeFloating v-if="data.freeCode" :freeCode="data.freeCode" />
	</view>
</template>

<script lang="ts" setup>
	import {
		reactive,
		ref
	} from 'vue';
	import PreviewVideo from '@/components/previewVideo'
	import { lifeProductDetail, insertShoppingCar } from '@/utils/api/goods'
	import { queryReviewsByRefId } from '@/utils/api/shop'
	import { onLoad } from '@dcloudio/uni-app';
	import { showToast } from '../../utils/toast';
	import ShareGoods from './components/shareGoods.vue'
	import { listUserCoupons } from '@/utils/api/freeShipping'
	import FreeFloating from '@/components/freeFloating.vue'
	const previewVideoc = ref()
	const popup = ref()
	const data = reactive<any>({
		show: false,
		show1: false,
		httpUrl: getApp().globalData.baseUrl,
		sku: {},
		attrs: [],
		commentObj: { pageNo: 1, pageSize: 10, spuId: '' },
		commentList: [],
		commentTotal: 0,
		isCoupon: false,
		listCoupons: [],
		info: { storeInfo: { storeTopProducts: [] }, preferentialPrice: '0.00', price: '0.00', hasPreferential: {}, productType: {} }
	})
	uni.$off('lifestyleProducts')
	uni.$on('lifestyleProducts', (id) => {
		data.id = id;
		init()
	})
	onLoad(({ id, productType, freeCode }) => {
		getApp().globalData.getUserInfo()
		data.id = id;
		data.productType = productType;
		data.freeCode = freeCode;
		init()
	})
	const handeClick2 = (item) => {
		if (data.id == item.spuId) {
			return;
		}
		data.id = item.spuId;
		init()
	}
	const previewVideo = (item) => {
		previewVideoc.value.init(item.id)
	}
	const previewImage = (item) => {
		uni.previewImage({
			current: 1,
			urls: [data.httpUrl + '/app/file/viewFile?fileId=' + item.id],
			loop: true,
		})
	}
	const handePreview = (index) => {
		uni.previewImage({
			current: index,
			urls: data.info.images.map(item => data.httpUrl + '/app/file/viewFile?fileId=' + item)
		});
	}
	const handeShare = () => {
		popup.value.open()
	}
	const customerService = () => {
		// data.info.serviceUserId = '1848031351512059906'
		const conversationID = `C2C${data.info.serviceUserId}`;
		uni.navigateTo({ url: `/pages/TUIKit/components/TUIChat/index?conversationID=${conversationID}&userId=${data.info.serviceUserId}&trendsId=${data.id}&areaType=shop` });
	}
	const handeClick1 = () => {
		data.commentObj.pageNo = 1;
		data.commentList = [];
		commentRequst()
	}
	const commentRequst = () => {
		uni.showLoading({
			title: '加载中...',
			mask: true
		})
		queryReviewsByRefId({ data: data.commentObj }).then((res) => {
			data.commentList = [...data.commentList, ...res.data.list];
			data.commentTotal = res.data.total
			data.show = true;
			uni.hideLoading()
		})
	}
	const scrolltolower = () => {
		if (data.commentTotal != data.commentList.length) {
			data.commentObj.pageNo += 1;
			commentRequst()
		}
	}
	const init = () => {
		lifeProductDetail({ data: { id: data.id, productType: data.productType, state: 'UP' } }).then((res) => {
			const obj = {};
			const arr = [];
			res.data.preferentialPrice = res.data.preferentialPrice + '';
			res.data.price = res.data.price + '';
			res.data.hasPreferential = res.data.hasPreferential || {}
			const attrsArr = [];
			for (var i in res.data.attrs) {
				attrsArr.push({ name: i, list: res.data.attrs[i] })
			}
			res.data.attrs = attrsArr
			if (res.data.preferentialPrice.indexOf('.') == -1) {
				res.data.preferentialPrice = res.data.preferentialPrice + '.00'
			}
			if (res.data.price.indexOf('.') == -1) {
				res.data.price = res.data.price + '.00'
			}
			if (res.data.skus) {
				res.data.skus.map((item) => {
					if (obj[item.specName]) {
						obj[item.specName].push(item)
					} else {
						obj[item.specName] = [item]
					}
				})
				for (var i in obj) {
					arr.push({ specName: i, list: obj[i] })
				}
				res.data.skus = arr;
				if (arr.length && arr[0].list.length) {
					data.sku = { ...arr[0].list[0], num: 1 };
				}
			}
			if (res.data.storeInfo.bondAmount >= 1000000) {
				res.data.storeInfo.bondAmount = ((res.data.storeInfo.bondAmount / 10000 + '').split('.')[0]) + '万'
			}
			data.info = res.data;
			data.commentObj.spuId = res.data.id;
		})
	}
	const back = () => {
		uni.navigateBack()
	}
	const handeClick = (i) => {
		if (i) {
			if (data.sku.num != data.sku.stockBalance) {
				data.sku.num = data.sku.num * 1 + 1;
			}
		} else {
			if (data.sku.num > 1) {
				data.sku.num = data.sku.num * 1 - 1;
			}
		}
	}
	const addCar = (i) => {
		data.isCoupon = false;
		data.isLj = i;
		data.show1 = true;

	}
	const purchase = () => {
		const attrs = [];
		data.info.attrs.map((item) => {
			item.list.map((item1) => {
				if (item.id == item1.id) {
					attrs.push({ propertyName: item1.propertyName, propertyValue: item1.propertyValue })
				}
			})
		})
		if (!attrs.length) {
			uni.showToast({
				title: '请选择属性',
				mask: true,
				icon: 'none'
			})
			return;
		}
		if (data.isLj) {
			//立即购买
			const goods = data.info.skus[0].list[data.info.skus[0].list.map(item => item.id).indexOf(data.sku.id)];
			goods.price = goods.preferentialPrice ? goods.preferentialPrice + '' : goods.price + '';
			const price = goods.price.indexOf('.') == -1 ? goods.price + '.00' : goods.price
			// console.log(data.info.skus[0].list[data.info.skus[0].list.map(item=>item.id).indeOf(data.sku.id)].specValue)
			navTo('/pages/confirmOrder/index');
			data.show1 = false;
			setTimeout(() => {

				uni.$emit('confirmOrder', [{name: data.info.storeInfo.storeName, list: [{ fileId: data.info.images[0], productName: data.info.productName, specName: goods.specName, specValue: goods.specValue, price: price, skuId: data.sku.id, num: data.sku.num, attrsList: attrs,sellType:data.info.sellType }] }])
				uni.$emit('emitFreeCode', data.freeCode)
			}, 500)
			return;
		} else {
			uni.showLoading({
				title: '加载中...',
				mask: true
			})

			insertShoppingCar({ data: { skuId: data.sku.id, num: data.sku.num, attrs } }).then((res) => {
				if (res.code == 200) {
					data.show1 = false;
					uni.showToast({
						title: '添加成功!',
						icon: 'none'
					})
				}
			})
		}

	}
	const navTo = (url : string) => {
		uni.navigateTo({
			url
		})
	}
</script>

<style lang="scss">
	.specificationsPopup {
		padding: 20rpx 32rpx;
		background: #fff;
		border-radius: 24rpx 24rpx 0 0;

		.specificationsPopupTop {
			padding-bottom: 64rpx;
			border-bottom: 1rpx solid #EFEFEF;
			display: flex;
			align-items: flex-start;
			justify-content: space-between;

			>image {
				width: 32rpx;
			}

			.left {
				display: flex;
				align-items: flex-start;

				.img {
					width: 176rpx;
					height: 176rpx;
					border-radius: 6rpx;
					margin-right: 24rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 6rpx;
					}
				}

				text:nth-of-type(1) {
					color: #6B64D3;
					font-size: 48rpx;

					&:before {
						content: '￥';
						font-size: 32rpx;
						color: #6B64D3;
						display: inline-block;
					}
				}

				text:nth-of-type(2) {
					color: #6B64D3;
					font-size: 48rpx;

					&:before {
						content: '￥';
						font-size: 20rpx;
						color: #BFBFBF;
						display: inline-block;
					}
				}
			}
		}



		.specificationsPopupMain {
			margin-top: 24rpx;
			padding-bottom: 20rpx;

			.listItem {
				display: flex;
				flex-wrap: wrap;

				text {
					// width: 96rpx;
					padding: 0 15rpx;
					line-height: 58rpx;
					text-align: center;
					background: #F4F6FA;
					font-size: 24rpx;
					margin-right: 24rpx;
					border-radius: 8rpx;
					margin-top: 20rpx;
				}

				.active {
					color: #6B64D3;
					background: #E4E2FC;
				}
			}
		}

		.specificationsPopupBot {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				display: flex;

				text {
					color: #8C8C8C;
				}
			}

			.right {
				display: flex;
				align-items: center;

				image {
					width: 40rpx;
				}

				input {
					width: 100rpx;
					height: 56rpx;
					text-align: center;
					background: #F5F5F5;
					margin: 0 20rpx;
				}
			}
		}

		.specificationsPopupBot1 {
			line-height: 88rpx;
			text-align: center;
			border-radius: 80rpx;
			color: #fff;
			margin-top: 50rpx;
			font-size: 36rpx;
			background: #6B64D3;
		}
	}

	.lifestyleProducts {
		min-height: 100vh;
		background: #F4F6FA;
		position: relative;
		display: flex;
		flex-direction: column;

		.popupEvaluate {
			background: #F4F6FA;

			scroll-view {
				height: 800rpx;
				overflow: auto;
			}

			.evaluateItem {
				padding: 32rpx 24rpx;
				background: #fff;
				border-radius: 32rpx;
				margin-bottom: 20rpx;

				.evaluateItemTop {
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
					color: #8C8C8C;

					.left {
						display: flex;
						align-items: center;

						.img {
							width: 96rpx;
							height: 96rpx;
							border-radius: 50%;
							background: #ccc;
							margin-right: 24rpx;

							image {
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}

						.text {
							display: flex;
							flex-direction: column;
							font-size: 32rpx;

							text {
								color: #8C8C8C;
								margin-top: 8rpx;
							}
						}
					}
				}

				>text {
					display: inline-block;
					margin: 24rpx 0;
				}

				.imgs {
					display: flex;
					flex-wrap: wrap;

					>view {
						width: 31%;
						height: 210rpx;
						margin-bottom: 20rpx;
						background: #ccc;
						margin-right: 3.5%;
						border-radius: 24rpx;
						position: relative;

						view {
							position: absolute;
							left: 0;
							top: 0;
							bottom: 0;
							right: 0;
							display: flex;
							align-items: center;
							justify-content: center;
							z-index: 7;

							image {
								width: 40rpx;
							}
						}

						>image:nth-of-type(1) {
							width: 100%;
							height: 100%;
							border-radius: 24rpx;
						}
					}

					>view:nth-of-type(3n) {
						margin-right: 0;
					}
				}

				.bot {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						display: flex;
						align-items: center;
						font-size: 24rpx;
						color: #8C8C8C;

						image {
							width: 30rpx;
							margin-right: 17rpx;
						}
					}

					.right {
						display: flex;
						align-items: center;

						view {
							display: flex;
							align-items: center;
							font-size: 24rpx;
							color: #8C8C8C;

							image {
								width: 30rpx;
								margin-right: 17rpx;
							}

							margin-left: 16rpx;
						}
					}
				}
			}

			.evaluateTop {
				display: flex;
				align-items: center;
				justify-content: space-between;

				image {
					width: 30rpx;
				}

				.left {
					width: 30rpx;
				}

				font-size: 32rpx;
				padding: 24rpx 43rpx 32rpx 43rpx;
			}
		}

		>scroll-view {
			flex: 1 auto;
			overflow: auto;
			height: 0;
		}

		.bottom1 {
			padding: 10rpx 24rpx 50rpx 24rpx;
			background: #fff;
			border-top: 1rpx solid #E5E5E5;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			text {
				width: 248rpx;
				line-height: 100rpx;
				text-align: center;
				color: #fff;
				background: #6B64D3;
				border-radius: 100rpx;
			}
		}

		.bottom {
			padding: 10rpx 30rpx 50rpx 38rpx;
			background: #fff;
			border-top: 1rpx solid #E5E5E5;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;

				view {
					// margin-left: 30rpx;
					display: flex;
					align-items: center;
					flex-direction: column;
					color: #595959;
					font-size: 18rpx;
				}

				view:nth-of-type(1) {
					margin-left: 0;
				}

				view:nth-of-type(2) {
					margin-left: 24rpx;
				}

				view:nth-of-type(3) {
					margin-left: 24rpx;
				}

				image {
					width: 48rpx;
					// margin-bottom: 5rpx;
				}
			}

			.right {
				display: flex;
				border-radius: 15rpx;
				overflow: hidden;

				text {
					width: 224rpx;
					font-size: 30rpx;
					// font-weight: 500;
					line-height: 80rpx;
					text-align: center;
					color: #fff;
				}

				text:nth-of-type(1) {
					background: #262626;
				}

				text:nth-of-type(2) {
					background: #6B64D3;
				}
			}
		}

		.goodsDetails {
			padding: 32rpx;
			background: #fff;

			.goodsDetailsTop {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 32rpx;

				.right {
					display: flex;
					align-items: center;

					image {
						width: 36rpx;
					}

					color: #8C8C8C;
				}
			}

			.goodsDetailsItem {
				margin-top: 32rpx;
				color: #595959;
				font-size: 32rpx;

				.img {
					height: 300rpx;
					border-radius: 24rpx;
					background: #ccc;
					margin-top: 32rpx;
				}
			}
		}

		>.top {
			position: absolute;
			top: 42rpx;
			left: 0;
			width: 100%;
			padding: 12rpx 24rpx;
			z-index: 8;

			>view:nth-of-type(1) {
				height: var(--status-bar-height);
			}

			view:nth-of-type(2) {
				display: flex;
				justify-content: space-between;

				>view {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 64rpx;
					height: 64rpx;
					border-radius: 50%;
					background: #6B64D3;
				}

				image {
					width: 25rpx;
				}

				view:nth-of-type(2) {
					image {
						width: 40rpx;
					}
				}
			}
		}

		.banner {
			swiper {
				height: 100%;
			}

			height: 750rpx;
			background: #ccc;

			image {
				width: 100%;
				height: 750rpx;
			}
		}

		.shop {
			padding: 32rpx;
			background: #fff;
			margin: 24rpx 0;

			.top {
				display: flex;
				align-items: center;

				.left {
					width: 128rpx;
					height: 128rpx;
					border-radius: 32rpx;
					background: #ccc;
					margin-right: 16rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 32rpx;
					}
				}

				.center {
					color: #595959;

					>view {
						margin-top: 16rpx;
						display: flex;

						view {
							border-radius: 8rpx;
							padding-right: 16rpx;
							margin-right: 16rpx;
							display: flex;
							align-items: center;

							image {
								width: 86rpx;
								margin-right: 10rpx;
							}
						}

						view:nth-of-type(1) {
							background: #CEEFFF;
							color: #40AFFF;
						}

						view:nth-of-type(2) {
							background: #FFFDCF;
							color: #FFCC40;
						}
					}

					flex: 1;
				}

				.right {
					display: flex;
					align-items: center;
					color: #FE142A;

					image {
						width: 36rpx;
						background: #6B64D3;
					}
				}
			}

			.bot {
				display: flex;
				margin-top: 32rpx;

				>view {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 30%;
					margin-right: 5%;
				}

				>view:nth-of-type(3n) {
					margin-right: 0;
				}

				.img {
					height: 198rpx;
					width: 100%;
					border-radius: 16rpx;
					background: #ccc;
					margin-bottom: 16rpx;

					image {
						height: 198rpx;
						width: 100%;
						border-radius: 16rpx;
					}
				}

				.text {
					padding: 0 8rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					color: #FF263F;
					font-size: 24rpx;
					margin: 0 0 8rpx 0;
					width: 100%;

					text {
						color: #595959;
						white-space: nowrap; // 强制一行显示
						overflow: hidden; // 超出隐藏
						text-overflow: ellipsis;
						width: 100%;
						text-align: center;
					}
				}
			}
		}

		.evaluate {
			padding: 32rpx;
			background: #fff;
			margin: 24rpx 0;

			.top {
				display: flex;
				align-items: center;
				font-size: 32rpx;
				justify-content: space-between;

				image {
					width: 36rpx;
				}
			}

			.listItem {
				display: flex;
				margin-top: 20rpx;

				.left {
					width: 64rpx;
					height: 64rpx;
					border-radius: 50%;
					margin-right: 16rpx;
					background: #ccc;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.right {
					flex: 1;
					width: 0;
					color: #8C8C8C;
					font-size: 24rpx;
					display: flex;
					flex-direction: column;

					text {
						margin-top: 12rpx;
					}
				}
			}
		}

		.price {
			padding: 32rpx;
			background: #fff;

			.price_1 {
				display: flex;
				align-items: flex-end;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: flex-end;

					&:before {
						content: '￥';
						display: inline-block;
						font-size: 32rpx;
						color: #FF5233;
					}

					text:nth-of-type(1) {
						font-size: 48rpx;
						color: #FF5233;
						position: relative;
						top: 8rpx;
					}

					text:nth-of-type(2) {
						font-size: 32rpx;
						color: #FF5233;
						vertical-align: middle;
					}

					text:nth-of-type(3) {
						text-decoration: line-through;
						color: #BFBFBF;
						margin-left: 5rpx;
						font-size: 26rpx;
					}
				}

				>text {
					font-size: 26rpx;
					color: #8C8C8C;
				}
			}

			.price_2 {
				margin-top: 32rpx;
				display: flex;
				align-items: flex-end;
				position: relative;

				.left {
					flex: 1;
					width: 0;
					display: flex;
					align-items: center;

					text {
						font-size: 32rpx;
						text-indent: 160rpx;
					}

					view {
						width: 71rpx;
						line-height: 40rpx;
						text-align: center;
						border-radius: 6rpx;
						text-indent: 0;
					}

					.sellType {
						background: #CD9A67;
						color: #fff;
						font-size: 24rpx;
						position: absolute;
						left: 0;
						top: 0;
					}

					.mdg {
						color: #FFF6E4;
						font-size: 20rpx;
						position: absolute;
						left: 81rpx;
						top: 0;
						background: linear-gradient(324deg, #FFBE88 0%, #FF743A 100%), linear-gradient(24deg, rgba(255, 130, 150, 0) 0%, #FF6A82 100%);
						font-family: 'MyFont1';
					}

					.productType {
						color: #6B64D3;
						font-size: 24rpx;
						position: absolute;
						left: 81rpx;
						top: 0;
						background: rgba(143, 51, 255, .2);
					}
				}

				image {
					width: 36rpx;
					margin-left: 5rpx;
				}
			}
		}
	}
</style>